<template>
	<view>
		<div style="background-color: #cccccc;position: relative;z-index: 1">
			<map
					v-if="mapHeight"
				@error="onError"
				:latitude="latitude"
				:longitude="longitude"
				id="map"
				show-location
					:markers="markers"
				:style="{
					width: '750rpx',
					height: mapHeight
				}"
			></map>
		</div>
		<div class="filter-card">
			<div class="-dot"></div>
			<div style="display: flex;margin-top: 30rpx;align-items: center">
				<div class="-select">厂房<cl-icon name="caret-bottom"></cl-icon></div>
				<div class="-input">
					<cl-icon color="#0040BB" class="-icon" name="search"></cl-icon>
					<input type="text" placeholder-style="color:#CFCDCD" placeholder="输入城市/类别/资产等">
				</div>
			</div>
			<div class="-tags">
				<div class="-tag active">全部</div>
				<div class="-tag">内容</div>
				<div class="-tag">内容</div>
				<div class="-tag">内容</div>
				<div class="-tag">内容</div>
			</div>
		</div>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {onLoad} from "@dcloudio/uni-app";

const latitude = ref("34.341568");
const longitude = ref("108.940174");
const mapHeight = ref(0);

const markers = ref([
	{
		id: 1,
		latitude: 34.341568,
		longitude: 108.940174,
		iconPath: "/static/shop.png",
		width: 50,
		height: 50,
		callout: {
			content: "我是marker的callout",
			color: "#EBB287",
			fontSize: 14,
			borderRadius: 10,
			bgColor: "#ffffff",
			padding: 10,
			display: "ALWAYS",
			borderColor: "#EBB287",
		},
	}
])
const onError = (e) => {
	console.log("map error:");
	console.log(e.detail);
};
onLoad(()=>{
	// 查询系统信息 获取可用的高度
	uni.getSystemInfo({
		success: (res)=> {
			console.log(res);
			// 可使用窗口宽度、高度
			console.log('height=' + res.windowHeight);
			console.log('width=' + res.windowWidth);
			// 计算主体部分高度,单位为px
			// this.mainHeight = res.windowHeight - 50;
			// 计算地图的高度
			mapHeight.value = (res.windowHeight - 150) + 'px';
			console.log(mapHeight.value)
		}
	});
})
</script>

<style lang="scss">
.filter-card{
	//悬浮于下半区的卡片
	position: fixed;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 160px;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	border: 1px solid #CDCED1;
	background-color: #FFFFFF;
	.-dot{
		width: 80rpx;
		height: 10rpx;
		background-color: #EEEEEE;
		border-radius: 5rpx;
		margin-top: 20rpx;
		margin-left: calc( (100% - 80rpx)/2 );
	}
	.-select{
		margin-left: 30rpx;
	}
	.-input{
		width: 540rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #F5F5F5;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		.-icon{
			margin-left: 30rpx;
			margin-right: 20rpx;
		}
	}
	.-tags{
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		.-tag{
			height: 50rpx;
			border-radius: 25rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			margin-right: 20rpx;
			border: 1px solid #EBB287;
			padding: 0 30rpx;
			color: #EBB287;
			font-size: 24rpx;
		}
		.-tag.active{
			background-color: #EBB287;
			color: #FFFFFF;
		}
	}
}
</style>
